<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	
	<body>
		<div id="app">
			<input type="" v-model="val">
			<button type="button" @click="add()">添加</button>
			
			<ul>
				<li v-for="item,index in list">
					{{item}}
					<button type="button" @click="del(index)">删除</button>
				</li>
			</ul>
		</div>
		<script type="text/javascript">
			const vm= new Vue({
				el:"#app",
				data:{
					val:'',
					list:[1,2,3,4]
				},
				methods:{
					add(){
						if(this.val){
							this.list.push(this.val)
						}
					},
					del(index){
						this.list.splice(index,1)
					}
				}
			})
		</script>
	</body>
	
</html>
